<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户管理内页</title>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<style>
    body{
        overflow: hidden;
    }
    .el-header, .el-footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;

        color: white;
        text-align: center;
        border: 1px solid #ebeef5;

        background-color: #409EFF;
    }
    .el-header{
        height: auto !important;
    }
    .el-main {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        background-color: white;
        color: #333;
        text-align: center;
    }
    .box-card{
        line-height: 30px;
    }
    @media screen and (max-width: 750px) {
        .el-dialog {
            width: 98% !important;
        }
        .xx_grid{
            display: grid;grid-template-columns: repeat(auto-fill,100%);grid-gap: 10px 10px;justify-content: center;margin-top: 20px;
        }
    }
    body{
        margin: 0px;
    }

</style>
<div id="content">
<div style="width: 100%;min-width: 1000px;">
    <h2 style=" display: flex;justify-content: flex-start;align-items: center;margin: 20px;">客户查询</h2>
    <div style="width: 100%; display: flex;justify-content: flex-start;align-items: center;margin: 20px;">

        <el-row >
            <el-button icon="el-icon-plus" circle @click="AddCustomer_pre"></el-button>
            <el-select v-model="select.source" placeholder="客户来源" @change="getCustomerListBySelect_pre">
                <el-option label="未选择" value="未选择"></el-option>
                <el-option label="地推联系" value="地推联系"></el-option>
                <el-option label="电话联系" value="电话联系"></el-option>
                <el-option label="主动联系" value="主动联系"></el-option>
            </el-select>
            <el-select v-model="select.industry" placeholder="客户所属行业"  @change="getCustomerListBySelect_pre">
                <el-option label="未选择" value="未选择"></el-option>
                <el-option label="计算机行业" value="计算机行业"></el-option>
                <el-option label="金融保险行业" value="金融保险行业"></el-option>
                <el-option label="其他行业" value="其他行业"></el-option>
            </el-select>
            <el-select v-model="select.level" placeholder="客户级别"  @change="getCustomerListBySelect_pre">
                <el-option label="未选择" value="未选择"></el-option>
                <el-option label="高级会员" value="高级会员"></el-option>
                <el-option label="中级会员" value="中级会员"></el-option>
                <el-option label="普通会员" value="普通会员"></el-option>
            </el-select>


        </el-row>
        <div style="margin:20px;margin-left: auto;">
            <el-input style="width: 200px;" v-model="search" placeholder="输入相关信息，一键查询"  @keyup.enter.native='getCustomerListBySelect_pre'></el-input>
            <el-button icon="el-icon-search" circle @click='getCustomerListBySelect_pre'></el-button>
        </div>

    </div>

    <el-button @click="checkedAll" style="margin-left: 10px;" size="mini" type="info" v-if="tableData.filter(e=>e.checked==true).length!=0">全选</el-button>
    <el-button @click="notcheckedAll" style="margin-left: 10px;" size="mini" type="warning" v-if="tableData.filter(e=>e.checked==true).length!=0">取消选中</el-button>
    <el-button style="margin-left: 10px;" size="mini" type="danger" v-if="tableData.filter(e=>e.checked==true).length!=0" @click='deleteAll()'>删除选中</el-button>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column label="选择" width="50px">
            <template slot-scope="scope">
                <span style="margin-left: 10px"><el-checkbox v-model="scope.row.checked"></el-checkbox></span>
            </template>
        </el-table-column>
        <el-table-column label="编号" >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column label="客户名称" >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
        </el-table-column>
        <el-table-column label="客户来源" >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.source }}</span>
            </template>
        </el-table-column>
        <el-table-column label="客户所属行业" >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.industry }}</span>
            </template>
        </el-table-column>
        <el-table-column label="客户级别" >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ levels[scope.row.level] }}</span>
            </template>
        </el-table-column>
        <el-table-column label="固定电话" >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.phone }}</span>
            </template>
        </el-table-column>
        <el-table-column label="手机" >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mobile }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
            <template slot-scope="scope">

                <el-button
                        size="mini"
                        @click="ModifyCustomer_pre(scope.$index, scope.row)">编辑</el-button>
                <el-popover
                        placement="top"
                        width="160"
                        v-model="scope.row.visible">
                    <p>确定删除吗？</p>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                        <el-button type="primary" size="mini" @click="scope.row.visible = false;deleteCustomer(scope.row.id);">确定</el-button>
                    </div>
                    <el-button size="mini" type="danger" slot="reference" >删除</el-button>
                </el-popover>

            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            :current-page="pageNum"
            layout="prev, pager, next" @current-change="getCustomerList"
            :page-count="pages" style="margin: 20px;">
    </el-pagination>
</div>

</div>
<script>
    var app = new Vue({
        el: '#content',
        data: {


            levels:['普通会员','中级会员','高级会员'],
            tableData: [],

            select:{},
            search:'',
            pageNum: 1,
            pages: 0
        },
        mounted:function(){
            this.getCustomerList();
            console.log("哦豁！打印了喂！")
            console.log(parent.app2.dialogFormVisible);
        },
        methods:{
            checkedAll(){
                this.tableData.forEach(item => {
                    this.$set(item, 'checked',true)
                })
            },
            notcheckedAll(){
                this.tableData.forEach(item => {
                    this.$set(item, 'checked',false)
                })
            },


            AddCustomer_pre: function(){
                parent.app2.dialogTitle="新增客户"
                parent.app2.form = {}
                parent.app2.dialogFormVisible=true
            },
            ModifyCustomer_pre: function(index,row){
                parent.app2.dialogTitle="修改客户信息"
                parent.app2.dialogFormVisible=true
                app.handleEdit(index,row)
            },
            ModifyCustomer: function(){
                var fd =new FormData();
                fd.append("id",parent.app2.form.id);
                fd.append("name",parent.app2.form.name);
                fd.append("source",parent.app2.form.source);
                fd.append("industry",parent.app2.form.industry);
                fd.append("level",parent.app2.levelChange(parent.app2.form.level));
                fd.append("phone",parent.app2.form.phone);
                fd.append("mobile",parent.app2.form.mobile);

                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('ModifyCustomer', fd,config)
                    .then(res => {
                        app.getCustomerList();
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            },
            AddCustomer: function(){
                var fd =new FormData();
                fd.append("name",parent.app2.form.name);
                fd.append("source",parent.app2.form.source);
                fd.append("industry",parent.app2.form.industry);
                fd.append("level",parent.app2.levelChange(parent.app2.form.level));
                fd.append("phone",parent.app2.form.phone);
                fd.append("mobile",parent.app2.form.mobile);

                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('AddCustomer', fd,config)
                    .then(res => {
                        app.getCustomerList();
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            },
            deleteAll: function() {
            	let ids = []
            	app.tableData.forEach(item => {
            		if(item.checked) ids.push(item.id)
            	})
            	app.deleteCustomer(ids)
            	app.notcheckedAll()
            },
            deleteCustomer: function(...id){
                var fd =new FormData();
                fd.append("id",id);
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('deleteCustomer', fd,config)
                    .then(res => {
                        app.getCustomerList();
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            },
            handleEdit: function(index,item){
                console.log(index);
                console.log(item);
                parent.app2.form=JSON.parse(JSON.stringify(item));
                parent.app2.form.level=parent.app2.levels[item.level];
                parent.app2.dialogFormVisible=true;
            },
            getCustomerList: function(page = 1){
                let item = app ? app.select : null
                let pattern = app ?app.search : null
                var fd =new FormData();
                fd.append("pageNum", page);
                if(item != null) {
                    if(item.level!=undefined && item.level!='未选择'){
                        var num=null
                        switch (item.level) {

                            case '普通会员':
                                num=0
                                break;
                            case '中级会员':
                                num=1
                                break;
                            case '高级会员':
                                num=2
                                break;
                            default:
                                break;
                        }
                        fd.append("level",num)
                    }
                    if(item.source!=undefined && item.source!='未选择'){
                        fd.append("source",item.source)
                    }
                    if(item.industry!=undefined && item.industry!='未选择'){
                        fd.append("industry",item.industry)
                    }
                }
                if(pattern) {
                    fd.append("pattern", pattern)
                }
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('getCustomerList', fd,config)
                    .then(res => {
                        console.log('数据是:', res);
                        app.tableData=res.data.data.list;
                        app.pages=res.data.data.pages;
                        app.pageNum = res.data.data.pageNum;
                        this.notcheckedAll();
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            },
            getCustomerListBySelect_pre: function(){
                app.getCustomerList();
            }
        }
    })
</script>
</body>
</html>
